<template>
	<view class="index">
		<!-- 轮播 -->
		<view class="top">
			<view class="search">
				<image src="../../static/images/sousuo.png" mode=""></image>
				<input type="text" />
				<button type="default">搜索</button>
			</view>
			<u-swiper height="400" :list="list"></u-swiper>
		</view>
		
		
		<!-- 金刚区 -->
		<view class="">
			<view class="navs">
				<view class="nav_n" v-for="(item,key) in nav" :key="key" @click="goDetail(key)">
					<image :src="item.image" mode=""></image>
					<view class="text">{{item.title}}</view>
				</view>
			</view>
			<view class="hot" @click="go">
				<image src="../../static/images/hot.png" mode=""></image>
				<u-notice-bar bg-color="white" color="red" mode="vertical" :volume-icon="false" :list="notice">
				</u-notice-bar>
			</view>
		</view>
		
		<!-- 积分兑换 -->
		<view class="hots">
		
			<view class="hots_goods">
				<view class="hots_title">
					<span class="left" @click="integral"> 积分兑换 </span>
					<span class="right" @click="tiao1"> 更多福利 > </span>
				</view>
				<view class="hots_goods1">
					<view class="hots_goodss" v-for="(item,index) in goods" :key="index" @click="tiao(item.id)">
						<view class="image">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="title">{{item.title}}</view>
						<view class="price">
							<span>{{item.score}}积分</span>
		
						</view>
					</view>
				</view>
		
			</view>
		</view>
		
		<!-- 选项卡切换 -->
		<view class="end-title">
			<view v-for="(item,index) in items" :key="index" :class="{btna:count == item.id}" @tap="change(item.id)">
				{{item.title}}
			</view>
		</view>
		<view class="end-cont">
		
			<dl class="main" v-for="(item,index) in newList" :key="index" @click="jump(item.id)">
				<dt>
					<image :src="item.image" mode=""></image>
				</dt>
				<dd style="margin-top: 10rpx;">{{item.title}}</dd>
				<dd class="time">{{item.createtime}}</dd>
			</dl>
		
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				nav:[
					{
						image:"https://cdn.uviewui.com/uview/swiper/3.jpg",
						title:'关于我们'
					},
					{
						image:"https://cdn.uviewui.com/uview/swiper/3.jpg",
						title:'玩法介绍'
					},
					{
						image:"https://cdn.uviewui.com/uview/swiper/3.jpg",
						title:'新人帮助'
					},
					{
						image:"https://cdn.uviewui.com/uview/swiper/3.jpg",
						title:'在线客服'
					},
				],
				notice:[
					'掌金优选上线了1',
					'掌金优选上线了2',
					'掌金优选上线了3',
				],
				goods:[
					{
						image:'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title:'机器人',
						score:'268'
					},
					{
						image:'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title:'机器人',
						score:'268'
					},
					{
						image:'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title:'机器人',
						score:'268'
					}
				],
				count: 1,
				items:[
					{
						title:'行业资讯'
					},
					{
						title:'活动专区'
					}
				],
				newList:[
					{
						image:'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title:'社交',
						createtime:'2021.9.6'
					},
					{
						image:'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title:'社交',
						createtime:'2021.9.6'
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			// 积分兑换
			tiao1() {
					//        
					uni.navigateTo({
						url: 'integral'
					})
				}
		
		}
	}
</script>

<style lang="scss" scoped>
	.top{
		// position: relative;
		.search{
			width:100%;
			position: fixed;
			top:80rpx;
			z-index: 999;
			image{
				width:30rpx;
				height: 30rpx;
				position: absolute;
				top:15rpx;
				left:70rpx;
			
			}
			input{
				background: url(../../static/images/sousuo.png);
				width:680rpx;
				height: 60rpx;
				border-radius: 30rpx;
				// border: 1px solid black;
				margin:0 auto;
				background: rgba(#fff, 0.3);
			}
			button{
				position: absolute;
				top:1rpx;
				right:30rpx;
				width: 140rpx;
				height: 60rpx;
				border-radius: 30rpx;
				line-height: 60rpx;
				font-size: 30rpx;
				color: white;
				background-color: #FBA821;
			}
		}
	}
	
	.navs {
		justify-content: flex-end;
		display: flex;
		width: 100%;
		background: white;
	
		.nav_n {
			justify-content: space-around;
			width: 25%;
			text-align: center;
			margin-top: 30rpx;
	
			image {
				width: 40rpx;
				height: 40rpx;
			}
	
			.text {
				padding: 20rpx 0;
			}
		}
	}
	
	.hot {
		background: white;
		overflow: hidden;
		border-top: 2rpx solid #F7F7F7;
		border-bottom: 25rpx solid #F7F7F7;
	
		image {
			width: 143rpx;
			height: 31rpx;
			float: left;
			padding: 20rpx 0rpx 20rpx 50rpx;
		}
	
		u-notice-bar {
			width: 300rpx;
			float: left;
			font-size: 26rpx;
			// margin-top:20rpx;
		}
	}
	
	.end-title {
		display: flex;
		background-color: white;
	}
	
	.end-title view {
		flex-grow: 1;
		text-align: center;
		padding: 20rpx 0;
	}
	
	.end-cont {
		overflow: hidden;
		background-color: white;
		
		dl {
			margin-top: 30rpx;
			overflow: hidden;
			border-bottom: 1rpx solid #DADADA;
			padding: 18rpx 60rpx;
		}
	
		image {
			width: 201rpx;
			height: 129rpx;
			border-radius: 10rpx;
			float: right;
			margin-bottom:10rpx;
		}
	
		.time {
			font-size: 20rpx;
			color: #999999;
			margin-top: 30rpx;
		}
	
		dd {
			padding-right: 15rpx;
		}
	}
	
	.btna {
		// margin:0 50rpx;
		border-bottom: 5rpx solid #F9A81F;
		// color: #FFFFFF;
		// background: #00A0FF;
	}
	
	
	.hots {
		background: white;
		border-bottom: 30rpx solid #F4F4F4;
		padding-top: 10rpx;
	
		.hots_goods {
			margin: 30rpx;
			background: url(../../static/images/hot_goods.png) no-repeat;
			background-size: 100% 100%;
			padding-bottom: 20rpx;
	
			.hots_title {
				overflow: hidden;
				padding: 20rpx;
	
				.left {
					float: left;
					font-size: 30rpx;
					font-weight: bold;
					color: white;
				}
	
				.right {
					font-size: 20rpx;
					float: right;
					color: white;
				}
			}
	
			.hots_goods1 {
				display: flex;
				justify-content: space-between;
				background: white;
				margin: 20rpx;
				padding: 30rpx;
				border-radius: 20rpx;
	
				.hots_goodss {
					width: 164rpx;
					font-size: 16rpx;
	
					image {
						width: 164rpx;
						height: 164rpx;
					}
	
					.title {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
	
					.price {
						color: #F9A81F;
					}
				}
			}
	
		}
	}
</style>
